---
import { Card, Heading, Link } from 'accessible-astro-components'
import { Icon } from 'astro-icon/components'
import { getCollection } from 'astro:content'

// Import images directly for optimization
import projectImage1 from '@assets/images/projects/project-image-1.png'
import projectImage2 from '@assets/images/projects/project-image-2.png'
import projectImage3 from '@assets/images/projects/project-image-3.png'

/**
 * FeaturedProjects Component
 *
 * @description A component that displays featured projects from Astro Content Collections
 */
interface Props {
  /**
   * Additional classes to apply to the section
   */
  class?: string
  /**
   * The number of projects to display
   * @default 3
   */
  limit?: number
  /**
   * The title for the section
   * @default "Featured projects"
   */
  title?: string
}

const { class: className, limit = 3, title = 'Featured projects' } = Astro.props

// Get projects from content collection
const projects = await getCollection('projects')
const projectImages = [projectImage1, projectImage2, projectImage3]

// Limit projects and add featured images
const featuredProjects = projects.slice(0, limit).map((project, index) => ({
  ...project,
  featuredImage: projectImages[index % projectImages.length],
}))
---

<section class:list={[className, 'my-64']}>
  <div class="container">
    <Heading level="h2" class="mb-6">{title}</Heading>
    <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
      {
        featuredProjects.map((project) => (
          <Card
            imageComponent={project.featuredImage}
            url={'/portfolio/' + project.id}
            headingLevel="h2"
            title={project.data.title}
            footer={'Author: ' + project.data.author}
          >
            {project.data.description}
          </Card>
        ))
      }
    </div>
    <div class="mt-12">
      <Link href="/portfolio/" isButton animateOnHover animationType="nudge">
        View all projects
        <Icon aria-hidden="true" name="lucide:arrow-right" size="1.5rem" />
      </Link>
    </div>
  </div>
</section>
